import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:test01/config/config.dart';
import 'package:test01/model/category_model.dart';

class CategoryContent extends StatefulWidget {
  const CategoryContent({Key? key}) : super(key: key);

  @override
  _CategoryContentState createState() => _CategoryContentState();
}

class _CategoryContentState extends State<CategoryContent> {
  int _selectIndex = 0;

  List<CategoryModelItem> _categoryList = [];

  List<CategoryModelItem> _categoryInfoList = [];

  static var leftWidth = ScreenUtil().screenWidth / 4;

  _getCategory() async {
    var dio = Dio();
    var result = await dio.get("${Config.domain}category/getFirstCategory");
    var categoryList = CategoryModel.fromJson(result.data);
    setState(() {
      if (mounted) {
        _categoryList = categoryList.data!;
      }
    });
    _getCategoryInfo(categoryList.data![0].id);
  }

  _getCategoryInfo(int? id) async {
    var dio = Dio();
    var result = await dio
        .get("${Config.domain}category/getSecondCategory?father_id=$id");
    var categoryInfoList = CategoryModel.fromJson(result.data);
    setState(() {
      if (mounted) {
        _categoryInfoList = categoryInfoList.data!;
      }
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getCategory();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
            width: leftWidth,
            height: double.infinity,
            color: Colors.white,
            child: ListView.builder(
                itemCount: _categoryList.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      InkWell(
                        child: Container(
                          child: Text(
                            "${_categoryList[index].name}",
                            textAlign: TextAlign.center,
                          ),
                          alignment: Alignment.center,
                          width: double.infinity,
                          color: _selectIndex == index
                              ? const Color.fromRGBO(230, 230, 230, 0.9)
                              : Colors.white,
                          height: 120.h,
                        ),
                        onTap: () {
                          setState(() {
                            _selectIndex = index;
                            _getCategoryInfo(_categoryList[index].id);
                          });
                        },
                      ),
                      const Divider(
                        height: 1,
                      )
                    ],
                  );
                })),
        buildSecondCategory()
      ],
    );
  }

  Widget buildSecondCategory() {
    if (_categoryInfoList.isNotEmpty) {
      return Expanded(
          child: Container(
              padding: EdgeInsets.all(10),
              height: double.infinity,
              color: const Color.fromRGBO(240, 240, 240, 0.9),
              child: GridView.builder(
                itemCount: _categoryInfoList.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    childAspectRatio: 1 / 1.5,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    crossAxisCount: 3),
                itemBuilder: (context, index) {
                  return GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, "/itemInfo", arguments: {
                        "categoryName": _categoryInfoList[index].name!,
                        "categoryId": _categoryInfoList[index].id
                      });
                    },
                    child: Container(
                      color: Colors.white,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Image.network(
                            _categoryInfoList[index].picture!,
                            height: 150.h,
                            fit: BoxFit.fill,
                          ),
                          Container(
                            child: Text("${_categoryInfoList[index].name}"),
                          )
                        ],
                      ),
                    ),
                  );
                },
              )));
    } else {
      return const Text("");
    }
  }
}
